<template>
  <Head-img :name="head.name" :text="head.text" />
  <div class="content">
    <div class="content-left">
      <div class="title">
        <span>推荐歌单</span>
        <router-link to="#">全部</router-link>
      </div>
      <div class="hots">
        <div  v-for="(item,index) in hotList" :key="index">
          <img :src="item.coverImgUrl" :alt="item.name">
           {{item.name}}
        </div>
      </div>
      <div class="title">
        <span>热搜列表</span>
        <router-link to="#">全部</router-link>
      </div>
    </div>
    <div class="content-right">
      <swiper-box :list="bannerList" class="swipe"></swiper-box>
      <div>
        <a-input-search
          v-model:value="name"
          placeholder="搜索歌曲"
          enter-button
          @search="getSearch"
        />
      </div>
      <div v-for="(item, index) in dataList" :key="index" class="list">
        <span @click="play(item)">{{ item.name }}</span>
      </div>
      <audio controls autoplay :src="url"></audio>
    </div>
  </div>
</template>

<script lang="ts">
import HeadImg from "@/components/HeadImg.vue";
import { searchKeywords, banner, songUrl, topDetail} from "@/api/music/index";
import { onBeforeMount, reactive, toRefs } from "vue";
import swiperBox from "@/components/swiperBox.vue"; // 引入swiper 组件
import { Input } from "ant-design-vue"; //引入ui

interface Model {
  name: number | string;
  size: number;
  page: number;
  dataList: Array<object>;
  bannerList: Array<object>;
  url: string;
  hotList: object[];
  getTop: Function;
}
interface Head {
  name: string | number;
  text: string | number;
}

const music = {
  name: "music",
  components: {
    swiperBox,
    HeadImg,
    [Input.Search.name]: Input.Search
  },
  setup() {
    const head: Head = reactive({
      name: "音乐",
      text:
        "想要救紫霞就必须要打败牛魔王，想要打败牛魔王就必须要变成孙悟空，想要变成孙悟空就必须忘掉七情六欲从此不能再有半点沾染。"
    });
    const data: Model = reactive({
      name: "",
      size: 15,
      page: 1,
      dataList: [],
      bannerList: [],
      url: "",
      hotList:[],
      getTop: async (): Promise<void> => {
        const res: any = await topDetail({order:'hot',limit:10});
        if(res.code === 200){
          console.log(res);
          data.hotList = res.playlists
        }
      }
    });

    interface Search {
      code: number;
      result: { songs: object[] };
    }

    // 查询音乐
    const getSearch = async (): Promise<void> => {
      if (!data.name) return;
      const res: any = await searchKeywords({
        keywords: data.name,
        limit: data.size,
        offset: data.page
      });

      if (res.code === 200) {
        data.dataList = res.result.songs;
      }
    };

    // 获取轮播图
    const getBanner = async (): Promise<void> => {
      const res: any = await banner({});
      data.bannerList = res.banners;
    };

    interface Play {
      name: string;
      id: number;
    }
    // 选择音乐
    const play = async (e: Play): Promise<void> => {
      const res: any = await songUrl({ id: e.id });
      console.log(res.data[0].url);
      data.url = res.data[0].url;
    };

    // 页面构建之前执行
    onBeforeMount(() => {
      getBanner();
      data.getTop();
    });

    return {
      ...toRefs(data),
      head,
      getSearch,
      play
    };
  }
};
export default music;
</script>

<style lang="scss" scoped>
.content {
  max-width: 100vw;
  overflow: hidden;
  display: flex;
  margin-top: 10px;
  padding: 0 10%;
  &-left {
    width: 70%;
    flex-shrink: 0;
    .title{
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 3rem;
      span{
        font-size: 1.2rem;
      }
    }
    .hots{
      width: 100%;
      height: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      div{
        width: 18%;
        flex-shrink: 0;
        margin-bottom: 1rem;
        img{
          width: 100%;
        }
      }
    }
  }
  &-right {
    margin-left: 2%;
    width: 28%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    .swipe {
      width: 100%;
    }
    .list {
      width: 70%;
      height: 3rem;
      line-height: 3rem;
      background-color: rgba(95, 158, 160, 0.356);
      border-bottom: 1px solid #999;
      cursor: pointer;
    }
  }
}
</style>
